<template>
  <a-modal :title="isEdit ? '编辑账户' : '新增账户'" :width="560" :visible="visible" @ok="handleModalConfirm"
    @cancel="handleModalCancel" :confirm-loading="modalLoading">
    <a-form-model ref="form" :model="form" :rules="formRules" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
      <a-form-model-item label="账号" prop="userName">
        <a-input v-model="form.userName" placeholder="请输入" :disabled="isEdit" allowClear />
      </a-form-model-item>
      <a-form-model-item label="昵称" prop="nickName">
        <a-input v-model="form.nickName" placeholder="请输入" allowClear />
      </a-form-model-item>
      <a-form-model-item label="角色" prop="roleId">
        <a-select v-model="form.roleId" :options="options" placeholder="请选择" allowClear></a-select>
      </a-form-model-item>
      <a-form-model-item label="手机号" >
        <a-input v-model="form.phone" placeholder="请输入" allowClear />
      </a-form-model-item>
      <a-form-model-item label="密码" :prop="!isEdit ? 'password' : ''">
        <a-input-password v-model="form.password" placeholder="请输入" allowClear visibilityToggle />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import * as Ajax from '@/api/system';
export default {
  props: {
    visible: {
      type: Boolean,
    },
    default: {
      type: Object,
      default: () => { },
    },
    options: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      modalLoading: false,
      form: {
        userName: '',
        nickName: '',
        roleId: undefined,
        phone: '',
        password: '',
      },
      formRules: {
        userName: { required: true, message: '请输入账号', trigger: ['blur', 'change'] },
        nickName: { required: true, message: '请输入昵称', trigger: ['blur', 'change'] },
        roleId: { required: true, message: '请选择角色', trigger: ['blur', 'change'] },
        phone: { required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
        password: { required: true, message: '请输入密码', trigger: ['blur', 'change'] },
      },
    };
  },
  computed: {
    isEdit() {
      return Object.keys(this.default).length > 0;
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.form = JSON.parse(JSON.stringify(this.default));
      } else {
        this.handleModalCancel();
      }
    },
  },
  methods: {
    handleModalConfirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.modalLoading = true;
          const params = { ...this.form };
          if (this.isEdit) {
            delete params.password;
          }
          const ajaxName = this.isEdit ? 'editUserList' : 'addUserList';
          const message = this.isEdit ? '编辑成功' : '新增成功';
          Ajax[ajaxName](params)
            .then(() => {
              this.$message.success(message);
              this.$emit('success');
            })
            .finally(() => {
              this.modalLoading = false;
            });
        }
      });
    },
    handleModalCancel() {
      this.$nextTick(() => {
        this.$refs.form.resetFields();
      });
      this.$emit('close');
    },
  },
};
</script>

<style lang="scss" scoped>
.table-wrap {
  margin-top: 20px;
  padding-top: 16px;
}

.btn-gruop {
  display: flex;
  justify-content: flex-end;
}

::v-deep .ant-form-item {
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
